import CodeView from '../../../shared/components/CodeView';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import * as Base from './base/example';

<div className="doc lead">
  An accordion allows a user to toggle the display of a section of content.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(Base.examples, 'styled')}
</CodeView>

## About Accordions

Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block.

## Accessibility

Availability of accordion content to assistive technology requires the use of `aria-controls` and toggling `aria-expanded` as regions are expanded and collapsed.

Accordion keyboard interaction should follow the recommendations of the [WAI-ARIA Authoring Practices for accordions](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction).

There are additional accessibility considerations within the [Buttons](/components/buttons) and [Menus](/components/menus).

## Default

<CodeView>{getDisplayElementById(Base.default)}</CodeView>

### Structure and Implementation

An accordion is implemented as an unordered list with a class of `slds-accordion`. Inside the list, each chunk of content is inside both a list item with class of `slds-accordion__list-item` and a section with a class of `slds-accordion__section`.

The content itself is contained within a div with the class `slds-accordion__content`, an ID that corresponds to the `aria-control` on the button and the hidden attribute.

Content visibility is toggled via a [Button](/components/buttons) in the H3 heading. To make accordion content visible, the section is given the class `slds-is-open`, the button is changed from `aria-expanded="false"` to `aria-expanded="true"`, and the hidden attribute is removed from the content div.

## Examples

### With Action Overflow Menu

<CodeView>
  {getDisplayElementById(Base.examples, 'has-action-overflow')}
</CodeView>

### In a Card

<CodeView>{getDisplayElementById(Base.examples, 'styled')}</CodeView>

### Nested

<CodeView>{getDisplayElementById(Base.examples, 'nested-accordions')}</CodeView>

### Heading with Truncation

<CodeView>
  {getDisplayElementById(Base.examples, 'long-heading-truncated')}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="accordion" type="component" />
